<template>
  <!-- <div class="menu-wrap" :style="{width: isCollapse ?  '64px' : '220px'}"> -->
  <div class="menu-wrap" >
      <el-menu
      :default-active="$route.name"
      class="menu-vertical"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      >
      <!-- :unique-opened="true" -->
       <MyMenu :menu-list="userStore.menuRoutes"></MyMenu>
      </el-menu>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import MyMenu from './menuItem.vue'
import useUserStore from '../../store/modules/user'
defineProps({
isCollapse: {
  type: Boolean,
  default: false
}
})
let $route = useRoute()
let userStore = useUserStore()
const handleOpen = (key, keyPath) => {
console.log('open', key, keyPath)
}
const handleClose = (key, keyPath) => {
console.log('close', key, keyPath)
}
</script>

<style lang="scss" scoped>
.menu-wrap{
  height: 100%;
  overflow: hidden;
  .menu-vertical {
      height: 100%;
      overflow: auto;
      
      &::-webkit-scrollbar {
          display: none;
      }
  }
  .menu-vertical:not(.el-menu--collapse) {
    width: 220px;
    min-height: 400px;
  }
  .el-menu {
      --el-menu-bg-color: #477EED;
      --el-menu-text-color: rgba(255,255,255,.8);
      --el-menu-active-color: #fff;
      --el-menu-hover-bg-color: #477EED;
  }
 
  :deep(.el-menu) {
    border: none;
  }
}

</style>